<template>
  <div class="bbbbbbbbbbb">
    <el-form
      :model="form"
      label-width="180px"
      :rules="rules"
      ref="ruleForm"
      v-if="shoFlag"
      :hide-required-asterisk="true"
    >
      <!-- <el-form-item :label="form.name.remark" prop="name.value">
          <el-input v-model="form.name.value" class="input"></el-input>
          <span class="tpis">平台名称会显示到前台，请合理输入此名称</span>
        </el-form-item> -->

      <el-form-item :label="form.logo.remark" prop="logo.value">
        <el-upload
          class="upload-demo"
          action
          :http-request="uploadFile"
          ref="upload"
          :limit="fileLimit"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :headers="headers"
          :on-change="fileChange"
        >
          <el-button type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/jpeg/png文件，且不超过5M
          </div>
        </el-upload>
        <el-image
          style="width: 100px; height: 100px"
          :src="imgHeader + form.logo.value"
          fit="cover"
        ></el-image>
      </el-form-item>

      <!-- <el-form-item :label="form.tbj_default_img.remark" prop="tbj_default_img.value">
          <el-upload
            class="upload-demo"
            action
            :http-request="uploadFile2"
            ref="upload2"
            :limit="fileLimit2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :on-exceed="handleExceed2"
            :before-upload="beforeUpload2"
            :show-file-list="false"
            :headers="headers">
            <el-button  type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
          </el-upload>
          <el-image
            style="width: 100px; height: 100px"
            :src="'https://bjsf.bjsky.top/'+form.tbj_default_img.value"
            fit="cover"></el-image>
        </el-form-item> -->

      <el-form-item
        :label="form.tbj_repair_phone.remark"
        prop="tbj_repair_phone.value"
      >
        <el-input
          v-model="form.tbj_repair_phone.value"
          class="input"
        ></el-input>
      </el-form-item>
      <el-form-item :label="form.kf_phone.remark" prop="kf_phone.value">
        <el-input v-model="form.kf_phone.value" class="input"></el-input>
      </el-form-item>

      <el-form-item :label="form.tbj_yj.remark" prop="tbj_yj.value">
        <el-input v-model="form.tbj_yj.value" class="input"></el-input>
      </el-form-item>

      <el-form-item :label="form.tbj_tzs.remark" prop="tbj_tzs.value">
        <el-input v-model="form.tbj_tzs.value" class="input"></el-input>
      </el-form-item>
      <el-form-item :label="form.tbj_kt.remark" prop="tbj_kt.value">
        <el-input v-model="form.tbj_kt.value" class="input"></el-input>
      </el-form-item>

      <!-- <el-form-item :label="form.tbj_circle.remark" prop="tbj_circle.value">
        <el-input v-model="form.tbj_circle.value" class="input"></el-input>
      </el-form-item> -->

      <!-- <el-form-item :label="form.tbj_circle_price.remark" prop="tbj_circle_price.value">
          <el-input v-model="form.tbj_circle_price.value" class="input"></el-input>
        </el-form-item> -->

      <!-- <el-form-item :label="form.tbj_circle_lining.remark" prop="tbj_circle_lining.value">
          <el-input v-model="form.tbj_circle_lining.value" class="input"></el-input>
        </el-form-item> -->

      <!-- <el-form-item :label="form.tbj_Bad_price.remark" prop="tbj_Bad_price.value">
          <el-input v-model="form.tbj_Bad_price.value" class="input"></el-input>
        </el-form-item> -->

      <el-form-item :label="form.tixian_price.remark" prop="tixian_price.value">
        <el-input v-model="form.tixian_price.value" class="input"></el-input>
      </el-form-item>
      <el-form-item
        :label="form.tixian_pricesss.remark"
        prop="tixian_pricesss.value"
      >
        <el-input v-model="form.tixian_pricesss.value" class="input"></el-input>
      </el-form-item>
      <el-form-item label="用户协议">
        <span class="span" @click="user">用户协议</span>
      </el-form-item>
      <el-form-item label="隐私协议">
        <span class="span" @click="yinsi">隐私协议</span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="closeDialog"
    >
      <el-upload
        class="upload-demo editorUpload"
        action
        :http-request="uploadFile3"
        ref="editorUpload"
        :limit="fileLimit3"
        :on-remove="handleRemove3"
        :file-list="fileList3"
        :on-exceed="handleExceed3"
        :before-upload="beforeUpload2"
        :show-file-list="false"
        :headers="headers"
        :on-change="fileChange"
      >
      </el-upload>

      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :height="200"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
        @ready="onEditorReady($event)"
      >
      </quill-editor>
      <div style="text-align: center; margin: 10px 0">
        <el-button type="primary" style="margin: 0 auto" @click="save()"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pingtaishezhi, saveSet, uploadFilec } from "../../utils/api";
import { quillEditor } from "vue-quill-editor";
import { compressImage } from "../../assets/js/compressImage";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
var _EditorOption_ = {
  modules: {
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"],
        [{ header: 1 }, { header: 2 }], //// 1、2 级标题-----[{ header: 1 }, { header: 2 }]
        // [{ size: ['small', false, 'large', 'huge'] }],// 字体大小
        [
          {
            size: ["12", "14", "16", "18", "20", "22", "24", "28", "32", "36"],
          },
        ], // 字体大小
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ align: [] }], // 对齐方式
        ["clean"], // 清除文本格式
        // ['link','image'] // 链接、图片、视频

        [{ header: [1, 2, 3, 4, 5, 6, false] }], //// 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
        // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
        [{ indent: "-1" }, { indent: "+1" }],
        // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
        [{ list: "ordered" }, { list: "bullet" }],
        // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
        [{ script: "sub" }, { script: "super" }],
        // 文本方向-----[{'direction': 'rtl'}]
        [{ direction: "rtl" }],
        // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
        // [{ size: ['small', false, 'large', 'huge'] }],
        // ['link', 'image'],  // 上传图片、上传视频
        ["image"], // 上传图片、上传视频
      ],
      handlers: {
        image: (value) => {
          if (value) {
            document.querySelector(".editorUpload input").click();
          } else {
            this.quill.format("image", false);
          }
        },
        link: function (value) {
          if (value) {
            // console.log(this.quill)
          } else {
            this.quill.format("link", false);
          }
        },
      },
    },
    history: {
      delay: 1000,
      maxStack: 50,
      userOnly: false,
    },
  },
  placeholder: "请输入正文",
  readyOnly: false, //是否只读
  theme: "snow", //主题 snow/bubble
  syntax: true, //语法检测
};
// toolbar标题
const titleConfig = [
  { Choice: ".ql-insertMetric", title: "跳转配置" },
  { Choice: ".ql-bold", title: "加粗" },
  { Choice: ".ql-italic", title: "斜体" },
  { Choice: ".ql-underline", title: "下划线" },
  { Choice: ".ql-header", title: "段落格式" },
  { Choice: ".ql-strike", title: "删除线" },
  { Choice: ".ql-blockquote", title: "块引用" },
  { Choice: ".ql-code", title: "插入代码" },
  { Choice: ".ql-code-block", title: "插入代码段" },
  { Choice: ".ql-font", title: "字体" },
  { Choice: ".ql-size", title: "字体大小" },
  { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
  { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "对齐方式" },
  { Choice: ".ql-color", title: "字体颜色" },
  { Choice: ".ql-background", title: "背景颜色" },
  { Choice: ".ql-image", title: "图像" },
  { Choice: ".ql-video", title: "视频" },
  { Choice: ".ql-link", title: "添加链接" },
  { Choice: ".ql-formula", title: "插入公式" },
  { Choice: ".ql-clean", title: "清除字体格式" },
  { Choice: '.ql-script[value="sub"]', title: "下标" },
  { Choice: '.ql-script[value="super"]', title: "上标" },
  { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
  { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
  { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
  { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
  {
    Choice: '.ql-align .ql-picker-item[data-value="center"]',
    title: "居中对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="right"]',
    title: "居右对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
    title: "两端对齐",
  },
];
export default {
  name: "platformSetup",
  components: {
    quillEditor,
  },
  data() {
    return {
      list: [],
      form: {},
      dialogTitle: "",
      shoFlag: false,
      imgHeader: this.Global.imgHeader,
      srcList2: {},
      rules: {
        // 1	tbj_name	淘百街	系统名称
        // 2	tbj_shop_logo	/uploads/20230428/9241078900f7733b554542681cc57aeb.png	系统logo
        // 3	tbj_default_img	/uploads/20230428/9241078900f7733b554542681cc57aeb.png	默认图片
        // 4	tbj_repair_phone
        //
        // 1311111111111	维修电话
        // 5	tbj_yj	100	百街押金
        // 6	tbj_tzs	100	库存桶装水
        // 7	tbj_circle	1000	圈里/m
        // 8	tbj_circle_price	3	圈外/每公里配送金额
        // 9	tbj_circle_lining	2	圈里/配送金额
        // 10	tbj_Bad_price	50	差评扣除
        // 11	tbj_kt	0	库存空桶
        // 12	tixian_price	0.03	提现费
        // 13	tixian_pricesss	0.1	余额大于多少可提现
        name: {
          value: [
            { required: true, message: "请输入平台名称", trigger: "blur" },
          ],
        },
        logo: {
          value: [{ required: true, message: "请上传logo图", trigger: "blur" }],
        },
        tbj_default_img: {
          value: [{ required: true, message: "请上传默认图", trigger: "blur" }],
        },
        tbj_repair_phone: {
          value: [
            { required: true, message: "请输入维修电话", trigger: "blur" },
            {
              validator: function (rule, value, callback) {
                if (/^1[3456789]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        tbj_yj: {
          value: [
            { required: true, message: "请输入百街押金", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                var reg = /^[1-9]\d*$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入大于0的整数"));
                } else if (value > 100000) {
                  callback(new Error("不能大于100000"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        tbj_tzs: {
          value: [
            { required: true, message: "请输入库存桶装水", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                var reg = /^\d+$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入不小于0的整数"));
                } else if (value > 100000) {
                  callback(new Error("不能大于100000"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        tbj_circle: {
          value: [
            { required: true, message: "请输入圈内范围/m", trigger: "blur" },
          ],
        },
        // tbj_circle_price:{
        //   value: [
        //     { required: true, message: '请输入圈外每公里配送金额', trigger: 'blur' },
        //   ],
        // },
        // tbj_circle_lining:{
        //   value: [
        //     { required: true, message: '请输入圈里配送金额', trigger: 'blur' },
        //   ],
        // },
        // tbj_Bad_price:{
        //   value: [
        //     { required: true, message: '请输入差评扣除', trigger: 'blur' },
        //   ],
        // },
        tbj_kt: {
          value: [
            { required: true, message: "请输入库存空桶", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                var reg = /^\d+$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入不小于0的整数"));
                } else if (value > 100000) {
                  callback(new Error("不能大于100000"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        tixian_price: {
          value: [
            { required: true, message: "请输入提现费", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                var reg = /^\d+(\.\d{1,2})?$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入不小于0且小数位不超过两位的数字"));
                } else if (value > 100000) {
                  callback(new Error("不能大于100000"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        tixian_pricesss: {
          value: [
            {
              required: true,
              message: "请输入余额大于多少可提现",
              trigger: "blur",
            },
            {
              validator: (rule, value, callback) => {
                var reg = /^\d+(\.\d{1,2})?$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入不小于0且小数位不超过两位的数字"));
                } else if (value > 100000) {
                  callback(new Error("不能大于100000"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
        kf_phone: {
          value: [
            { required: true, message: "请输入客服电话", trigger: "blur" },
            {
              validator: function (rule, value, callback) {
                if (/^1[3456789]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
        },
      },

      fileLimit: 1,
      fileLimit2: 1,
      fileLimit3: 20,
      fileList: [],
      fileList2: [],
      fileList3: [],
      headers: { "Content-Type": "multipart/form-data" },
      fileType: ["png", "jpg", "jpeg"],
      dialogVisible: false,

      editorOption: _EditorOption_,
      content: "",
      serverUrl: "",

      saveFlag: false,
    };
  },
  watch: {
    content(n, o) {
      if (this.dialogTitle == "用户协议") {
        // console.log(n)
      } else {
        // console.log(n)
      }
    },
  },
  methods: {
    onEditorFocus(e) {},
    onEditorChange(e) {
      if (e.html == this.form.yonghu.value) {
        this.saveFlag = false;
      } else {
        this.saveFlag = true;
      }
      if (e.html == this.form.yinsi.value) {
        this.saveFlag = false;
      } else {
        this.saveFlag = true;
      }
    },
    onEditorReady(e) {},
    onEditorBlur(e) {},
    save() {
      this.dialogVisible = false;
      if (this.dialogTitle == "用户协议") {
        if (this.saveFlag) {
          this.form.yonghu.value = this.content;
        }
      }

      if (this.dialogTitle == "隐私协议") {
        if (this.saveFlag) {
          this.form.yinsi.value = this.content;
        }
      }
      this.saveFlag = false;
    },
    user() {
      this.dialogVisible = true;
      this.content = this.form.yonghu.value;
      this.dialogTitle = "用户协议";
      console.log(this.saveFlag);
    },
    yinsi() {
      this.dialogVisible = true;
      this.content = this.form.yinsi.value;
      this.dialogTitle = "隐私协议";
    },
    closeDialog() {
      if (!this.saveFlag) {
        this.dialogVisible = false;
        this.content = "";
      } else {
        this.$confirm("您有未保存的操作，确认关闭？？")
          .then((_) => {
            this.dialogVisible = false;
          })
          .catch((_) => {});
      }
    },
    pingtaishezhi() {
      pingtaishezhi(sessionStorage.getItem("token")).then((res) => {
        if (res.data.status) {
          this.list = res.data.data;
          this.form.name = this.list.find((e) => {
            return e.key == "tbj_name";
          });
          this.form.logo = this.list.find((e) => {
            return e.key == "tbj_shop_logo";
          });
          this.form.tbj_default_img = this.list.find((e) => {
            return e.key == "tbj_default_img";
          });
          this.form.tbj_repair_phone = this.list.find((e) => {
            return e.key == "tbj_repair_phone";
          });
          this.form.kf_phone = this.list.find((e) => {
            return e.key == "kf_phone";
          });
          this.form.tbj_yj = this.list.find((e) => {
            return e.key == "tbj_yj";
          });
          this.form.tbj_tzs = this.list.find((e) => {
            return e.key == "tbj_tzs";
          });
          this.form.tbj_circle = this.list.find((e) => {
            return e.key == "tbj_circle";
          });
          // this.form.tbj_circle_price = this.list.find(e=>{return e.key == 'tbj_circle_price'})
          // this.form.tbj_circle_lining = this.list.find(e=>{return e.key == 'tbj_circle_lining'})
          // this.form.tbj_Bad_price = this.list.find(e=>{return e.key == 'tbj_Bad_price'})
          this.form.tbj_kt = this.list.find((e) => {
            return e.key == "tbj_kt";
          });
          this.form.tixian_price = this.list.find((e) => {
            return e.key == "tixian_price";
          });
          this.form.tixian_pricesss = this.list.find((e) => {
            return e.key == "tixian_pricesss";
          });
          this.form.yonghu = this.list.find((e) => {
            return e.key == "user_xieyi";
          });
          this.form.yinsi = this.list.find((e) => {
            return e.key == "yinsi_xieyi";
          });
          this.shoFlag = true;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    beforeUpload2(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 压缩文件
    compressFile() {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      this.fileList.forEach(async (item) => {
        // console.log("this.fileList1", this.fileList1);
        console.log("原图size1===>", item.size);
        let result = await compressImage({
          file: item.raw,
          config,
          fileName: item.name,
        });
        console.log("压缩后图片size1===>", result.finalFile.size);
        // this.imageList.push(result);
        this.srcList2 = result.finalFile;
        // console.log("aaa", result.finalFile);
        // console.log("bbb", this.srcList2);
        // console.log("this.srcList", this.srcList);
      });
      // console.log("压缩后图片1===>", this.imageList);
    },
    uploadFile(item) {
      this.$message("文件上传中........");
      this.compressFile();
      let timer = setTimeout(() => {
        uploadFilec(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            this.form.logo.value = res.data.data.saveurl;
            this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
            let i = this.fileList.indexOf(this.srcList2);
            this.handleSuccess();
          }
        });
        clearTimeout(timer);
      }, 1000);
      //上传文件的需要formdata类型;所以要转
      // uploadFilec(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.logo.value = res.data.data.saveurl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    uploadFile2(item) {
      this.$message("文件上传中........");
      this.compressFile();
      let timer = setTimeout(() => {
        uploadFilec(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            this.form.tbj_default_img.value = res.data.data.saveurl;
            this.fileList2.push(this.srcList2); //成功过后手动将文件添加到展示列表里
            let i = this.fileList2.indexOf(this.srcList2);
            this.handleSuccess();
          }
        });
        clearTimeout(timer);
      }, 1000);
      //上传文件的需要formdata类型;所以要转
      // uploadFilec(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.tbj_default_img.value = res.data.data.saveurl;
      //     this.fileList2.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList2.indexOf(item.file);
      //     this.handleSuccess2();
      //   }
      // });
    },

    uploadFile3(item) {
      this.$message("文件上传中........");
      this.compressFile();
      let timer = setTimeout(() => {
        uploadFilec(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            let quill = this.$refs.myQuillEditor.quill;
            let length = quill.getSelection().index;
            quill.insertEmbed(length, "image", res.data.data.weburl);
            quill.setSelection(length + 1);
            this.fileList3.push(item.file); //成功过后手动将文件添加到展示列表里
            let i = this.fileList2.indexOf(this.srcList2);
            this.handleSuccess();
          }
        });
        clearTimeout(timer);
      }, 1000);
      //上传文件的需要formdata类型;所以要转
      // uploadFilec(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼

      //     let quill = this.$refs.myQuillEditor.quill;
      //     let length = quill.getSelection().index;
      //     quill.insertEmbed(length, "image", res.data.data.weburl);
      //     quill.setSelection(length + 1);
      //     this.fileList3.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList3.indexOf(item.file);
      //     this.handleSuccess3();
      //   }
      // });
    },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClose();
    },
    //上传成功后的回调
    handleSuccess2() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClose2();
    },
    handleSuccess3() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClose3();
    },
    //这是我自定义的移除事件
    handleClose(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    //这是我自定义的移除事件
    handleClose2(i) {
      this.fileList2.splice(i, 1); //删除上传的文件
    },
    handleClose3(i) {
      this.fileList3.splice(i, 1); //删除上传的文件
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //超出文件个数的回调
    handleExceed2() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    handleExceed3() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    handleRemove() {},
    handleRemove2() {},
    handleRemove3() {},
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let list = {};
          for (let key in this.form) {
            list[this.form[key].key] = this.form[key].value;
          }
          console.log(list);
          saveSet(JSON.stringify(list), sessionStorage.getItem("token"))
            .then((res) => {
              // console.log(res)
              if (res.data.status) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.pingtaishezhi();
  },
  mounted() {
    setTimeout(() => {
      for (let item of titleConfig) {
        let tip = document.querySelector(".quill-editor " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
      }
    }, 300);
  },
};
</script>

<style scoped>
.input {
  width: 20%;
}
.tpis {
  margin-left: 30px;
  color: #8c939d;
}
/deep/.upload-demo .el-upload--text {
  border: none;
  width: auto;
  height: auto;
}
.upload-demo {
  line-height: normal;
  margin-bottom: 20px;
}
.bbbbbbbbbbb {
  max-height: 80vh;
  overflow: scroll;
}
.bbbbbbbbbbb .el-form {
  margin-bottom: 200px;
}
.span {
  text-decoration: underline;
  cursor: pointer;
  color: #3a8ee6;
}
/deep/.quill-editor .ql-container .ql-editor {
  height: 400px;
  overflow: scroll;
}
</style>
